<template>
  <div class="course-infos-top">
    <div class="info-wrap">
      <div class="title-box">
        <h1>{{ item.name }}</h1>
        <h2>{{ item.summary }}</h2>
      </div>
    </div>
    <div
      class="fixed-wrap spring-activity ">
      <div class="con">
        <div class="time-price clearfix">
          <div class="no-discount clearfix l">
            <!-- <div class="ori-price l">
               <template v-if="!item.isFree">
                 {{ unitPrice(item.price, "￥", "") }}
               </template>
               <template v-else>
                 免费
               </template>
             </div> -->
          </div>
        </div>
        <div class="info-bar clearfix">
          <span>任务</span>
          <span class="nodistance">{{ item?.taskNum ?? 0 }}个</span>
          <i class="imv2-dot_samll"></i>
          <span>学习人数</span>
          <span class="nodistance"> {{ item?.learnerNumber ?? 0 }}人</span>
          <i class="imv2-dot_samll"></i>
          <span>完成课时数</span>
          <span class="nodistance">{{ item?.finishNum ?? 0 }}个</span>
          <i class="imv2-dot_samll"></i>
          <span>未完成课时数</span>
          <!-- 核心优化：未完成课时数 = 总任务数 - 已完成课时数，确保结果不为负数 -->
          <span class="nodistance">
    {{ Math.max((item?.taskNum ?? 0) - (item?.finishNum ?? 0), 0) }}个
  </span>
          <i class="imv2-dot_samll"></i>
          <span v-if="item.finishNum>=item.taskNum">本课程已学完</span>
          <i v-if="!(item.finishNum>=item.taskNum)" class="imv2-dot_samll"></i>
          <a v-if="!!certificate" @click="download">下载学习证书</a>
          <i v-if="!!certificate && (!!item.examId || item.finishNum<item.taskNum)" class="imv2-dot_samll"></i>
          <span v-if="!!item.examId" style="color: #cf222e">本课程需要考试
    <span v-if="item.examPassed ==1" style="color: green">，考试已通过</span>
  </span>
          <i v-if="!!item.examId && item.finishNum<item.taskNum" class="imv2-dot_samll"></i>
          <span>当前进度</span>
          <span class="nodistance">
    {{ item?.taskNum ? Math.round((item.finishNum ?? 0) / item.taskNum * 100) : 0 }}%
  </span>
          <i class="imv2-dot_samll"></i>
        </div>
        <!-- <div class="btns js-btns" v-if="!item.isFree">
           <div class="double-btn" v-if="!purchased">
             <a-button class="js-buy-trigger btn-buy" :loading="buyLoading"
                       @click="buyNow">
               立即购买
             </a-button>
             <a-button class="js-addcart btn-buy" :loading="cartLoading"
                       @click="addShoppingCart">
               加购物车
             </a-button>
           </div>
           <div v-else>
             <a-alert message="课程已购买" type="success" show-icon />
           </div>
         </div> -->
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {ref} from "vue";
import router from "@/router";
import {addToCart, checkCartExist} from "@/api/cart";
import {useMessage} from "@/hooks/web/useMessage";
import {downloadFile} from "@/api/common/api";

const {createMessage, createConfirm} = useMessage();

const cartLoading = ref<any>(false);
const buyLoading = ref<any>(false);

const props = defineProps({
  item: {
    type: Object,
    default: {}
  },
  purchased: {
    type: Boolean,
    default: false
  },
  certificate: {
    type: Object,
    default: null
  }
});

async function addShoppingCart() {
  let params = {
    goodsId: props.item.id,
    number: 1
  };
  cartLoading.value = true;
  try {
    const res: any = await checkCartExist(props.item.id);
    if (!res?.result) {
      createConfirm({
        iconType: "warning",
        title: "提示",
        content: "课程已经在购物车内",
        okText: "去购物车结算",
        cancelText: "继续逛逛",
        onOk: async () => {
          await router.push("/mall/cart");
        },
        onCancel: async () => {
          await router.push("/course");
        }
      });
      return;
    }
    await addToCart(params);
    createMessage.success("添加到购物车成功");
    await router.push("/mall/cart");
  } finally {
    cartLoading.value = false;
  }
}

async function buyNow() {
  await router.push({path: "/mall/pay", query: {way: 2, goodsId: props.item.id}});
}

function download() {
  const fileName = props.certificate.certificatePath.substring(props.certificate.certificatePath.lastIndexOf("/") + 1);
  downloadFile(`/certificate/downloadCertificate?objectName=${props.certificate.certificatePath}&fileName=${fileName}`, fileName);
}
</script>

<style lang="less" scoped>
.course-infos-top {
  width: 100%;
  position: relative;
  background-size: cover;
  background: url(../../assets/img/course_bg.jpg) no-repeat center;
}

.course-infos-top .info-wrap {
  width: 1152px;
  margin: 0 auto;
  padding-top: 72px;
  padding-bottom: 136px;
  position: relative;
}

.course-infos-top .info-wrap .title-box {
  width: 1000px;
  margin: 0 auto;
}

.course-infos-top .info-wrap .title-box h1 {
  text-align: center;
  font-size: 40px;
  color: #fff;
  line-height: 48px;
  text-shadow: 0 2px 4px rgba(28, 31, 33, .6);
}

.course-infos-top .info-wrap .title-box h2 {
  text-align: center;
  font-size: 16px;
  color: #fff;
  line-height: 24px;
  text-shadow: 0 2px 4px rgba(28, 31, 33, .6);
  margin-top: 8px;
}

h1, h2 {
  font-size: 100%;
  font-weight: 400;
  font-family: "Microsoft YaHei", PingFangSC-Regular;
}

.course-infos-top .fixed-wrap {
  width: 1152px;
  min-height: 128px;
  position: absolute;
  left: 50%;
  margin-left: -576px;
  bottom: -64px;
  background-image: url(../../assets/img/purchase_bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: 18px;
  box-shadow: 0 8px 16px 0 rgba(28, 31, 33, .1);
}

.course-infos-top .fixed-wrap .con {
  position: relative;
  width: 100%;
  height: 128px;
  padding: 32px 40px;
  box-sizing: border-box;
}

.course-infos-top .fixed-wrap .con .info-bar {
  margin-top: 12px;
  position: absolute;
  bottom: 32px;
}


.course-infos-top .fixed-wrap .con .time-price .no-discount {
  position: relative;
}

.course-infos-top .fixed-wrap .con .time-price .no-discount .ori-price {
  font-size: 30px;
  color: #f01414;
  line-height: 30px;
  font-weight: 700;
}

.course-infos-top .fixed-wrap .con .time-price .ori-price {
  color: #93999f;
  vertical-align: super;
}

.course-infos-top .fixed-wrap .con .info-bar i {
  font-size: 16px;
  color: #545c63;
  line-height: 16px;
  padding: 0 4px;
  vertical-align: middle;
}

.course-infos-top .fixed-wrap .con .info-bar span {
  font-size: 12px;
  color: #545c63;
  line-height: 24px;
  font-weight: 700;
  padding-right: 8px;
}

.course-infos-top .fixed-wrap .con .info-bar span.nodistance {
  padding-right: 0;
  font-weight: 400;
}

.course-infos-top .fixed-wrap .con .btns {
  position: absolute;
  top: 40px;
  right: 40px;
  font-size: 0;
}

.course-infos-top .fixed-wrap .con .btns .double-btn .btn-buy {
  margin-left: 15px;
  border-radius: 24px 0 0 24px;
  background: rgba(240, 20, 20, .1);
  color: #f20d0d;
}

.course-infos-top .fixed-wrap .con .btns .double-btn .btn-buy:last-child {
  border-radius: 0 24px 24px 0;
  background: #f01414;
  color: #fff;
  margin-left: 0;
}
</style>
